<template>
<div class="book">
  <div class="title">
    <p class="big-title">图片上传</p>
  </div>
  <div class="clearfix">
    <el-button class="new" type="primary" @click="create" size="medium">新建图库</el-button>
    <el-button type="warning" class="el-icon-menu" plain @click="manage"></el-button>
  </div>
  <el-divider><i class="el-icon-notebook-2"></i></el-divider>
<el-card class="box-card">

  <div class="top">
    <span>名称</span>
    <span class="time">更新时间</span>
  </div>
  <el-collapse v-model="activeNames"  @change="handleChange">
     <template v-if="libraryList.length !== 0">
      <el-collapse-item v-for="(library, index) in libraryList" :key="library.id" :name="index">
      <template slot="title">
        <span class="name">{{library.name}}</span>
        <span class="time">{{library.createtime}}</span>
         <el-dropdown @command="addCommand" placement="top" class="addPra">
          <span class="add" @click="add"><i class="el-icon-plus"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{type: 'word',  lid: library.id}">添加文档</el-dropdown-item>
            <el-dropdown-item :command="{type: 'file',  lid: library.id}">添加图片</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="libraryCommand" placement="top" class="setsPra">
          <span class="sets" @click="setLibrary">设置</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{type: 'write',  lid: library.id, name: library.name}">编辑</el-dropdown-item>
            <el-dropdown-item :command="{type: 'delete',  lid: library.id, index: index}">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <div class="text" v-for="item in articleList[library.id]" :key="item.id">
          <span class="flag"><i class="el-icon-s-flag"></i></span>
          <span class="itemName" :title="item.docname">{{item.docname}}</span>
          <span class="time">{{item.createtime}}</span>
          <span class="tag"><el-tag type="none">{{item.identity ? item.identity : '文档' }}</el-tag></span>
          <el-dropdown @command="docCommand" placement="bottom" class="more">
            <span><i class="el-icon-more"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type: 'write',  docid: item.id, lid: library.id}">编辑</el-dropdown-item>
              <el-dropdown-item :command="{type: 'delete',  docid: item.id, index, index}">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="text" v-for="item in fileList[library.id]" :key="item.id">
          <span class="flag"><i class="el-icon-s-flag"></i></span>
          <span class="itemName">{{item.filename}}</span>
          <span class="time">{{item.createtime}}</span>
          <span class="tag"><el-tag type="none">附件</el-tag></span>
          <el-dropdown @command="fileCommand" placement="bottom" class="more">
            <span><i class="el-icon-more"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type: 'write',  fileid: item.id}">查看</el-dropdown-item>
              <el-dropdown-item :command="{type: 'delete',  fileid: item.id}">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-collapse-item>
    </template>
    <el-empty v-else :image-size="200"></el-empty>
</el-collapse>
</el-card>
  </div>
</template>

<script>
import { getUserProfile } from '@/utils/api/user'
import { getLibrary, deleteLibrary, showArticle, deleteDoc, showFile, deleteFile, lookFile, updateLibName } from '@/utils/api/library'
export default {
  components: {},
  props: {},
  data () {
    return {
      activeNames: [],
      uid: null,
      libraryList: '',
      articleList: {},
      fileList: {},
      indexList: []
    }
  },
  // inject: ['reload'],
  created () {
    this.getLib()
  },
  methods: {
    getLib () {
      getUserProfile().then(res => {
        this.uid = res.data.data.id
        getLibrary(this.uid).then(res => {
          this.libraryList = res.data.data
          if (this.libraryList) {
            this.articleList = {}
            this.fileList = {}
            for (const i of this.libraryList) {
              showArticle(i.id).then(res => {
                this.articleList[i.id] = res.data.data;
              })
              showFile(i.id).then(res => {
                this.fileList[i.id] = res.data.data
              })
            }
          }
        })
      })
    },
    handleChange (val) {
      this.indexList = val
    },
    updateName (lid, name) {
      this.$prompt('请输入新的抽屉名称', '抽屉编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: name
      }).then(({ value }) => {
        updateLibName(lid, value).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功'
          });
          this.getLib()
          if (this.indexList.length) {
            for (let j = 0; j < this.indexList.length; j++) {
              this.show(this.indexList[j])
            }
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '修改失败'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    show (index) {
      var _this = this
      var timer = setInterval(function () {
      // 判断文档和所有子资源(图片、音视频等)已完成加载
        if (document.readyState === 'complete') {
          _this.activeNames.push(index)
          // 执行方法
          window.clearInterval(timer)
        }
      }, 500)
    },
    create () {
      this.$router.push('/page/createBook')
    },
    // 文档库的删除和编辑
    libraryCommand (command) {
      if (command.type === 'delete') {
        this.$confirm('确认删除该文档库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            lid: command.lid,
            uid: Number(this.uid)
          }
          deleteLibrary(data).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getLib()
            if (this.indexList.length) {
              for (let j = 0; j < this.indexList.length; j++) {
                this.show(this.indexList[j])
              }
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.updateName(command.lid, command.name)
      }
    },
    // 文档的删除和编辑
    docCommand (command) {
      if (command.type === 'delete') {
        this.$confirm('确认删除该文档, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDoc(command.docid).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getLib()
            this.reload()
            this.show(command.index)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$router.push('/page/wirte/' + command.lid + '/' + command.docid)
      }
    },
    // 文档的创建
    addCommand (command) {
      if (command.type === 'word') {
        this.$router.push('/page/wirte/' + command.lid + '/' + '01')
      } else {
        this.$router.push('/page/wirte/' + command.lid + '/' + '02')
      }
    },
    // 附件的删除和查看
    fileCommand (command) {
      if (command.type === 'delete') {
        this.$confirm('确认删除该文档, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteFile(command.fileid).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          this.getLib()
          this.reload()
          this.show(command.index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        lookFile(command.fileid).then(res => {
          window.location.href = res.data.data
        })
      }
    },
    // 取消冒泡
    setLibrary (event) {
      event.stopPropagation();
    },
    add (event) {
      event.stopPropagation();
    },
    // 信息提醒
    manage () {
      this.$alert('抽屉相当于个人知识库，在抽屉里的可以放自己的文章', '柚子抽屉', {
        confirmButtonText: '确定'
      });
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  position: relative;
  top: -20px;
  p{
    text-align: center;
  }
  .big-title{
    font-size: 34px;
    margin-bottom: 0px;
    position: relative;
    }
    span{
      font-size: 20px;
      color: #f59b32;
    }
.big-title::before,.big-title::after{
      content: '';
      display: inline-block;
      width: 20px;
      height: 1px;
      background-color: #000;
      position: absolute;
      top: 20px;
    }
  .big-title::before{
    left: 50%;
    transform: translate(-102px, 0);
  }
  .big-title::after{
      right: 50%;
      transform: translate(102px, 0);
    }
}
.el-divider__text, .el-link{
  font-size: 26px;
}
.el-divider--horizontal{
  margin-top: 0;
  margin-bottom: 35px;
}.el-divider{
      background-color: #e4e4e4;
    }
  .book{
    width: 100%;
    margin: 0px auto 70px;
  }
  /deep/ .el-card__header {
    padding: 18px 20px;
    border-bottom: 0;
    box-sizing: border-box;
  }
  .el-card{
    min-height: 450px;
    width: 90%;
    margin: 0 auto;
  }
  .el-card:hover{ box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5),
                    inset 6px 6px 20px rgba(0, 0, 0, 0.05);
                transform: scale(0.98);
                cursor: pointer;

}
  .clearfix{
    font-size: 24px;
    position: relative;
    text-align: right;
    bottom: 20px;
    .new{
      height: 40px;
    }
  }
  .el-collapse{
    background-color: #fff;
  }
  /deep/ .el-collapse-item__header{
    align-items: center;
    height: 48px;
    line-height: 48px;
    background-color: #fff;
    color: #303133;
    cursor: pointer;
    border-bottom: 1px solid #EBEEF5;
    font-size: 17px;
    transition: border-bottom-color .3s;
    outline: 0;
    position: relative;
  }
  /deep/ .el-collapse-item__content {
    padding-bottom: 25px;
    font-size: 13px;
    color: #303133;
    line-height: 1.769230769230769;
    // background-color: transparent;
}
.flag{
  color: #facd91;
  font-size: 18px;
  position: absolute;
  top: -1px;
}
.top,.text{
  position: relative;
}
.text{
  margin-top: 15px;
  height: 30px;
  font-size: 17px;
  .tag{
    position: absolute;
    right: 250px;
    top: -1px;
  }
}
.top{
  margin-bottom: 10px;
  font-size: 20px;
}
.el-collapse-item__header{

  span{
    position: absolute;
  }
}
.addPra{
  position: absolute;
  display: inline-block;
  right: 80px;
  top: 0;
  color: #aaa;
  font-size: 17px;
  width: 50px;
    .add{
    font-size: 20x;
    right: 17px;
    .el-icon-plus{
      color: #aaa;
      font-weight: 900;
    }
  }
}
.setsPra{
  position: absolute;
  display: inline-block;
  right: 40px;
  top: 0;
  color: #aaa;
  font-size: 17px;
  width: 50px;
  .sets{
    position: absolute;
    color: #49c0f3;
    display: inline-block;
    right: -8px;
    width: 50px;
  }
}

.time{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .itemName{
    margin-left: 30px;
    display: inline-block;
    width:35%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/deep/ .el-tag {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    display: inline-block;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 12px;
    color: #409EFF;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
}
.more{
  display: inline-block;
  position: absolute;
  right: 20px;
  transform: rotate(90deg);
  color: #aaa;
  top: 5px;
  font-size: 20px;
}
</style>
